<template>
  <div style="padding: 10px 15px">
    <!-- 查询条件-->
    <div class="filter-container">
      <el-input
        v-model="listQuery.title"
        placeholder="请输入门店名称"
        style="width: 200px"
        class="filter-item"
        @keyup.enter.native="handleFilter"
      />
      <el-button
        class="filter-item seachbttn"
        type="primary"
        icon="el-icon-search"
        @click="handleFilter"
        >查询</el-button
      >
    </div>
    <div class="filter_fenge"></div>
    <div class="filter-container">
      <el-button
        class="filter-item bttnleft"
        type="primary"
        icon="el-icon-edit"
        @click="handleCreate"
        >新增</el-button
      >
      <el-button
        class="filter-item"
        type="danger"
        icon="el-icon-delete"
        @click="deleteClick()"
        >删除</el-button
      >
      <el-button
        class="filter-item"
        type="primary"
        icon="el-icon-edit"
        @click="RelAreaClick()"
        >区域关联</el-button
      >
    </div>
    <!--查询条件 end-->

    <!--table-->
    <el-table
      v-loading="listLoading"
      :data="CpnOrgData"
      fit
      highlight-current-row
      style="width: 100%"
      @selection-change="handleSelectionChange"
      stripe
    >
      <el-table-column type="selection" width="55" />
      <el-table-column label="门店名称" align="left" min-width="150px">
        <template slot-scope="{ row }">
          <span>{{ row.name }}</span>
        </template>
      </el-table-column>
      <el-table-column label="门店代码" align="right" width="80px">
        <template slot-scope="{ row }">
          <span>{{ row.orgID }}</span>
        </template>
      </el-table-column>
      <el-table-column label="关联区域代码" align="right" width="100px">
        <template slot-scope="{ row }">
          <span>{{ row.area }}</span>
        </template>
      </el-table-column>
      <el-table-column label="更新时间" align="left" width="160px">
        <template slot-scope="{ row }">
          <span>{{ row.uptDttStr }}</span>
        </template>
      </el-table-column>
      <el-table-column fixed="right" label="操作" width="80">
        <template slot-scope="scope">
          <el-button
            type="primary"
            size="mini"
            @click="handleClick(scope.row)"
            >编辑</el-button
          >
        </template>
      </el-table-column>
    </el-table>

    <pagination
      v-show="listQuery.total > 0"
      :total="listQuery.total"
      :page.sync="listQuery.page"
      :limit.sync="listQuery.limit"
      @pagination="fetchData(this)"
    />

    <!--table end -->

    <!--弹出层  新增-->
    <el-dialog
      :title="textMap[dialogStatus]"
      :visible.sync="dialogFormVisible"
      width="55%"
      :before-close="handleClose"
      :show-close="false"
    >
      <el-form :model="form" :inline="true" label-position="right">
        <el-form-item label="门店代码">
          <el-input v-model="form.orgID"></el-input>
        </el-form-item>
        <el-form-item label="门店名称">
          <el-input v-model="form.name"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="saveForm">确 定</el-button>
      </div>
    </el-dialog>

    <!--详情-->
    <el-dialog title="详情" :visible.sync="dialogdetailsVisible" width="55%">
      <el-form
        :model="details_form"
        :inline="true"
        label-position="right"
      ></el-form>
    </el-dialog>

    <el-dialog
      title="区域设置"
      :visible.sync="dialogRelAreaVisible"
      width="25%"
      label-position="right"
    >
      <el-form ref="form" :model="form" label-width="80px">
        <el-form-item label="区域代码">
          <el-input v-model="form.area" label-width="40px"></el-input>
        </el-form-item>
      </el-form>

      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogRelAreaVisible = false">取 消</el-button>
        <el-button type="primary" @click="saveCpnOrgArea">确 定</el-button>
      </div>
    </el-dialog>
    <!--弹出层 end-->
  </div>
</template>


<script>
import Pagination from "@/components/Pagination"; // secondary package based on el-pagination
import { AjaxToken, TipConfirm } from "@/api/common";
import { SelectAjax } from "@/api/common";
import { Jurisdiction } from "@/api/common";
import sessionStorage from "@/api/Storage";
import "url-search-params-polyfill"; //兼容IE，否则无法识别URLSearchParams
export default {
  name: "CpnOrg",
  components: { Pagination },
  methods: {
    //弹层关闭
    handleClose() {},
    //权限
    Jurisdiction(moduleActionName) {
      return Jurisdiction(moduleActionName, this);
    },
    //多选
    handleSelectionChange(val) {
      this.multipleSelection = val;
    },
    //多选赋值
    toggleSelection(rows) {
      if (rows) {
        rows.forEach((row) => {
          this.$refs.multipleTable.toggleRowSelection(row);
        });
      } else {
        this.$refs.multipleTable.clearSelection();
      }
    },
    //搜索
    handleFilter() {
      this.listQuery.page = 1;
      this.fetchData();
    },
    //新增
    handleCreate() {
      this.dialogStatus = "create";
      this.dialogFormVisible = true;
      this.form = {
        bsTyp: "",
        cpnID: "",
        orgID: "",
        name: "",
        prtID: "",
        type: "",
        srv: "",
        dbName: "",
        srvIp: "",
        srvPort: "",
        lockIP: "",
        stt: "",
        brf: "",
        uptr: "",
        uptDtt: "",
      };
    },
    //编辑
    handleClick(row) {
      this.form.bsTyp = row.bsTyp;
      this.form.cpnID = row.cpnID;
      this.form.orgID = row.orgID;
      this.form.name = row.name;
      this.form.prtID = row.prtID;
      this.form.type = row.type;
      this.form.srv = row.srv;
      this.form.dbName = row.dbName;
      this.form.srvIp = row.srvIp;
      this.form.srvPort = row.srvPort;
      this.form.lockIP = row.lockIP;
      this.form.stt = row.stt;
      this.form.brf = row.brf;
      this.form.uptr = row.uptr;
      this.form.uptDtt = row.uptDtt;
      this.dialogStatus = "edit";
      this.dialogFormVisible = true;
    },
    //保存
    saveForm() {
      var arr = this.multipleSelection;
      var params = new URLSearchParams();
      var caheid = sessionStorage.getItem("cpnID");
      params.append(
        "CpnID",
        caheid == null || caheid == undefined ? this.logincpnid : caheid
      );
      params.append("OrgID", this.form.orgID);
      params.append("Name", this.form.name);
      backstage.SaveCpnOrg(this, params);
    },
    saveCpnOrgArea() {
      var arr = this.multipleSelection;
      var multis = [];
      for (var i = 0; i < arr.length; i++) {
        multis.push(arr[i].orgID);
      }
      var params = new URLSearchParams();
      var caheid = sessionStorage.getItem("cpnID");
      params.append("orgids", JSON.stringify(multis));
      params.append("AreaID", this.form.area);
      params.append(
        "CpnID",
        caheid == null || caheid == undefined ? this.logincpnid : caheid
      );
      backstage.SaveCpnOrgArea(this, params);
    },
    //删除
    deleteClick(row) {
      var multis = [];
      var params = new URLSearchParams();
      if (row == undefined || row == "") {
        var arr = this.multipleSelection;
        if (arr == undefined || arr.length <= 0) {
          this.$message({
            showClose: true,
            message: "请至少选中一行",
            type: "error",
          });
          this.listLoading = false;
          return;
        } else {
          for (var i = 0; i < arr.length; i++) {
            multis.push(arr[i].orgID);
          }
          params.append("delds", JSON.stringify(multis));
        }
      } else {
        multis.push(row.orgID);
        params.append("delds", JSON.stringify(multis));
      }
      this.$confirm("确认删除吗？", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "error",
      })
        .then((a) => {
          this.listLoading = true;
          var caheid = sessionStorage.getItem("cpnID");

          params.append(
            "CpnID",
            caheid == null || caheid == undefined ? this.logincpnid : caheid
          );
          backstage.DelCpnOrg(this, params);
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
          this.listLoading = false;
        });
    },
    RelAreaClick(row) {
      var params = new URLSearchParams();
      if (row == undefined || row == "") {
        var arr = this.multipleSelection;
        if (arr == undefined || arr.length <= 0) {
          this.$message({
            showClose: true,
            message: "请至少选中一行",
            type: "error",
          });
          this.listLoading = false;
          return;
        }
      }
      this.$confirm("每个门店区域只可生成一次,确认生成区域吗？", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "info",
      })
        .then((a) => {
          this.form.area = Math.floor(Math.random() * (9999 - 1000 + 1)) + 1000;
          this.dialogRelAreaVisible = true;
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消",
          });
          this.listLoading = false;
        });
    },
    //查询
    fetchData() {
      this.listLoading = true;
      var params = new URLSearchParams();
      params.append(
        "Parms",
        '{"page":' +
          this.listQuery.page +
          ',"rows":' +
          this.listQuery.limit +
          "}"
      );
      var user = JSON.parse(sessionStorage.getItem("userinfo"));
      var caheid = sessionStorage.getItem("cpnID");
      // params.append("CpnID",this.form.cpnID == "" ? this.user.cpnId : this.form.cpnID);
      params.append("Name", this.listQuery.title);
      params.append(
        "CpnID",
        caheid == null || caheid == undefined ? this.logincpnid : caheid
      );
      backstage.GetCpnOrgLst(this, params);
    },
  },

  //初始化
  created() {
    if (this.$route.params.cpnID != undefined) {
      sessionStorage.setItem({
        name: "cpnID",
        value: this.$route.params.cpnID,
      });
    }
    var userinfo = JSON.parse(sessionStorage.getItem("userinfo"));
    this.logincpnid = userinfo.cpnId;
    this.fetchData();
  },
  data() {
    return {
      logincpnid: "",
      multipleSelection: [],
      formLabelWidth: "120px",
      CpnOrgData: null,
      listQuery: {
        title: "",
        total: 0,
        page: 1,
        limit: 10,
      },
      listLoading: true,
      dialogFormVisible: false,
      dialogdetailsVisible: false,
      dialogRelAreaVisible: false,
      dialogStatus: "",
      textMap: {
        update: "修改",
        create: "添加",
      },
      form: {
        bsTyp: "",
        cpnID: "",
        orgID: "",
        name: "",
        prtID: "",
        type: "",
        srv: "",
        dbName: "",
        srvIp: "",
        srvPort: "",
        lockIP: "",
        stt: "",
        brf: "",
        uptr: "",
        uptDtt: "",
        area: "",
      },
      details_form: {
        bsTyp: "",
        cpnID: "",
        orgID: "",
        name: "",
        prtID: "",
        type: "",
        srv: "",
        dbName: "",
        srvIp: "",
        srvPort: "",
        lockIP: "",
        stt: "",
        brf: "",
        uptr: "",
        uptDtt: "",
      },
    };
  },
};
//后台事件
var backstage = {
  //获取CpnOrg集合
  GetCpnOrgLst: function (thisobj, params) {
    AjaxToken(
      thisobj,
      "GetCpnOrgLst",
      params,
      "post",
      function (res) {
        thisobj.listLoading = false;
        var body = res.data.data;
        thisobj.CpnOrgData = body.rows;
        thisobj.listQuery.page = body.page;
        thisobj.listQuery.total = body.records;
      },
      function (err) {}
    );
  },
  SaveCpnOrg: function (thisobj, params) {
    AjaxToken(
      thisobj,
      "SaveCpnOrg",
      params,
      "post",
      function (res) {
        var body = res.data;
        if (body.success) {
          thisobj.$message({
            showClose: true,
            message: body.message,
            type: "success",
            duration: 3000,
          });
          thisobj.fetchData();
          thisobj.dialogFormVisible = false;
        } else {
          thisobj.$message({
            showClose: true,
            message: body.message,
            type: "error",
          });
        }
      },
      function (err) {}
    );
  },
  SaveCpnOrgArea: function (thisobj, params) {
    AjaxToken(
      thisobj,
      "SaveCpnOrgArea",
      params,
      "post",
      function (res) {
        var body = res.data;
        if (body.success) {
          thisobj.$message({
            showClose: true,
            message: body.message,
            type: "success",
            duration: 3000,
          });
          thisobj.fetchData();
          thisobj.dialogRelAreaVisible = false;
        } else {
          thisobj.$message({
            showClose: true,
            message: body.message,
            type: "error",
          });
        }
      },
      function (err) {}
    );
  },
  DelCpnOrg: function (thisobj, params) {
    AjaxToken(
      thisobj,
      "DelCpnOrg",
      params,
      "post",
      function (res) {
        thisobj.listLoading = false;
        var body = res.data;
        if (body.success) {
          thisobj.$message({
            showClose: true,
            message: body.message,
            type: "success",
            duration: 3000,
          });
          thisobj.fetchData();
          thisobj.dialogFormVisible = false;
        } else {
          thisobj.$message({
            showClose: true,
            message: body.message,
            type: "error",
          });
        }
      },
      function (err) {}
    );
  },
};
</script>
